<template>
    <div class="oneSelect">
        <div class="slect-title">
            <div class="title">python基础一阶段测评</div>
            <div class="practiceTime">
                <img src="../../../assets/img/practice/clock.png" alt="" />
                <div class="timer">02：12：05</div>
            </div>
        </div>

        <div class="practice-content">
            <div class="item" v-show="radioIndex == 1">
                <div class="item-top">
                    <div class="title-num">1/6</div>

                    <div class="titleType">【单选题】</div>
                    <div class="titleSign">
                        <img
                            src="../../../assets/img/practice/tag.png"
                            alt=""
                        />
                        <div class="sign">标记</div>
                    </div>
                </div>
                <p class="item-msg">
                    这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述。
                </p>
                <div class="check">
                    <el-radio v-model="radio" label="1"
                        >这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述。</el-radio
                    >
                </div>
                <div class="check">
                    <el-radio v-model="radio" label="2"
                        >这是一些关于python基础一阶段测评得文字描述；这是一些关于。</el-radio
                    >
                </div>
                <div class="check">
                    <el-radio v-model="radio" label="3"
                        >这是一些关于python基础一阶段测评得文字描述。</el-radio
                    >
                </div>
                <div class="check">
                    <el-radio v-model="radio" label="4"
                        >这是一些关于python基础一阶段测评得文字描述。</el-radio
                    >
                </div>
            </div>
            <div class="item" v-show="radioIndex == 2">
                <div class="item-top">
                    <div class="title-num">2/6</div>

                    <div class="titleType">【多选题】</div>
                    <div class="titleSign">
                        <img
                            src="../../../assets/img/practice/tag.png"
                            alt=""
                        />
                        <div class="sign">标记</div>
                    </div>
                </div>
                <p class="item-msg">
                    这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述。
                </p>
                <el-checkbox-group v-model="checkList">
                    <div class="check">
                        <el-checkbox label="这是一些关于python基础一阶段测评得文字描述；这是基础一阶段测评得文字描述。"></el-checkbox>
                    </div>
                    <div class="check">
                        <el-checkbox label="这是一些关于python基础一阶段测评一阶段测评得文字描述。"></el-checkbox>
                    </div>
                    <div class="check">
                        <el-checkbox label="这是一些关python基础一阶段测评得文字描述。"></el-checkbox>
                    </div>
                    <div class="check">
                        <el-checkbox label="这是一些关于python基础一阶python基础一阶段测评得文字描述。"></el-checkbox>
                    </div>
                </el-checkbox-group>
            </div>
            <div class="item" v-show="radioIndex == 3">
                <div class="item-top">
                    <div class="title-num">3/6</div>

                    <div class="titleType">【判断题】</div>
                    <div class="titleSign">
                        <img
                            src="../../../assets/img/practice/tag.png"
                            alt=""
                        />
                        <div class="sign">标记</div>
                    </div>
                </div>
                <p class="item-msg">
                    这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述。
                </p>
                <div class="check">
                    <el-radio v-model="radio" label="1"
                        >正确</el-radio
                    >
                </div>
                <div class="check">
                    <el-radio v-model="radio" label="2"
                        >错误</el-radio
                    >
                </div>
                
            </div>
            <div class="item" v-show="radioIndex == 4">
                <div class="item-top">
                    <div class="title-num">3/6</div>

                    <div class="titleType">【判断题】</div>
                    <div class="titleSign">
                        <img
                            src="../../../assets/img/practice/tag.png"
                            alt=""
                        />
                        <div class="sign">标记</div>
                    </div>
                </div>
                <p class="item-msg">
                    这是一些关于python基础一<span>___A___</span>评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测<span>___B___</span>一些关于python基础一阶段测评得文字描述。
                </p>
                <div class="inputAnswer">
                    <span>
                        输入答案：
                        
                    </span>
                    <div class="inpuYourAnswer">
                        <div>
                            A:<input type="text">
                        </div>
                        <div>
                            B:<input type="text">
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="item" v-show="radioIndex == 5">
                <div class="item-top">
                    <div class="title-num">3/6</div>

                    <div class="titleType">【判断题】</div>
                    <div class="titleSign">
                        <img
                            src="../../../assets/img/practice/tag.png"
                            alt=""
                        />
                        <div class="sign">标记</div>
                    </div>
                </div>
                <p class="item-msg">
                    这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述；这是一些关于python基础一阶段测评得文字描述。
                </p>
                <textarea class="answerArea" name="answer" id="" cols="30" rows="10"></textarea>
                
            </div>
        </div>

        <div class="btn">
            <div class="goBtn">
                <div class="backBtn" @click="back">上一题</div>
                <div class="nextBtn" @click="next">下一题</div>
            </div>
            <div class="submitBtn" @click="submit">提交试卷</div>
        </div>

        <div class="titleNum">
            <div class="title-msg">题目</div>
            <div class="titleNum-btn">
                <div :class="{ active: actived == 1 }" class="btn-num" @click="goOther(1)">1</div>
                <div :class="{ active: actived == 2 }" class="btn-num" @click="goOther(2)">2</div>
                <div :class="{ active: actived == 3 }" class="btn-num" @click="goOther(3)">3</div>
                <div :class="{ active: actived == 4 }" class="btn-num" @click="goOther(4)">4</div>
                <div :class="{ active: actived == 5 }" class="btn-num" @click="goOther(5)">5</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            radio: "",
            radioIndex: 1,
            actived:1,
            checkList: [],
        };
    },
    components: {},
    created() {},
    mounted() {},
    methods: {
        back(){
            if(this.radioIndex > 1){
                this.radioIndex--
            }
        },
        next(){
            if(this.radioIndex < 5){
                this.radioIndex++
            }
        },
        goOther(i){
            this.radioIndex = i;
            this.actived = i
        },
        submit(){
            this.$router.push('/onlinePractice');
        }
    },
};
</script>

<style lang='scss' scoped>
@import "../../../assets/css/onlinePractice/titleType/oneSelect.scss";
</style>